<template>
  <div>
    <!-- 首页顶部导航位置 -->
    <div>
      <van-nav-bar class="top_search" left-arrow>
        <!-- 导航打招呼位置 -->
        <template #left>
          <div class="Home_hi">
            <div class="Hi">{{ hello_text }}</div>
            <div class="Hi_name">{{user_name}}</div>
          </div>
        </template>
        <!-- 导航搜索位置 -->
        <template #right>
          <van-search
            @focus="goSearch()"
            v-model="searchContent"
            shape="round"
            right-icon="true"
            placeholder="输入商品名称"
          />
        </template>
      </van-nav-bar>
    </div>

    <!-- 内容位置 -->
    <div class="content">
      <!-- 轮播图位置 -->
      <div class="Home_banner">
        <!-- :autoplay="3000" -->
        <!--  -->
        <van-swipe :autoplay="2000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image.bannerImg" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 热卖推荐 -->
      <div class="hotpay">
        <div>热卖推荐</div>
      </div>

      <!-- 热卖推荐商品位置 -->
      <div class="hotPro">
        <HotPro
          v-for="(item, index) in HotProData"
          :key="index"
          :HotProData="item"
        />
      </div>
    </div>
  </div>
</template>

<script>
import HotPro from "../components/HotPro";
export default {
  name: "Home",
  data() {
    return {
      searchContent: "",
      // 轮播图片
      images: [],
      // 热卖商品
      HotProData: [],
      // 首页的招呼语
      hello_text: "",
      // 首页的用户昵称
      user_name:""
    };
  },
  // 钩子函数creared
  created() {
    this.banner();
    this.typeProducts();
    this.hello_user();
  },
  methods: {
    // 跳转至搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
      // this.axios({
      //   method: "get",
      //   url: "/search",
      //   params: {
      //     name: this.searchContent,
      //   },
      // })
      //   .then((res) => {
      //     
      //   })
      //   .catch((err) => {
      //     
      //   });
    },

    // 轮播图的接口方法
    banner() {
      this.axios({
        method: "get",
        url: "/banner",
        params: {},
      })
        .then((res) => {
          
          this.images = res.data.result;
          
        })
        .catch((err) => {
          
        });
    },

    // 调用商品热卖接口
    typeProducts() {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          
          if (res.data.code === 500) {
            this.HotProData = res.data.result;
          }
          
        })
        .catch((err) => {
          
        });
    },

    // 获取到用户的名称 并且显示时间段的打招呼
    hello_user() {
      let date = new Date();
      let h = date.getHours();
      if (h >= 6 && h < 12) {
        this.hello_text = "早上好";
      } else if (h >= 12 && h < 18) {
        this.hello_text = "下午好";
      } else if (h >= 18 && h < 24) {
        this.hello_text = "晚上好";
      } else if (h >= 0 && h < 6) {
        this.hello_text = "深夜好";
      }

      // 调用个人资料的接口
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        url:"findMy",
        method:"get",
        params:{
          tokenString
        }
      }).then(res =>{
        
        if(res.data.code === 700){
          this.user_name = " "
        }
        if(res.data.code === "A001"){
          this.user_name = res.data.result[0].nickName;
        }
      }).catch(err =>{
        
      })
    },

  },
  components: {
    HotPro,
  },
};
</script>

<style lang="less" scoped>
// 首页打招呼位置'
.Home_hi {
  display: flex;
  .Hi {
    font-weight: bold;
    color: #777;
    margin-right: 5px;
  }
  .Hi_name {
    // flex: 0 30%;
    color: blue;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 60px;
    text-align: initial;
  }
}

// 首页导航组件
/deep/.van-search {
  padding: 0;
}

// 给搜索框设置高度
/deep/.van-search__content {
  width: 220px;
}

// 内容的背景
.content {
  width: 100%;
  background: #f0f0f0;
  position: fixed;
  box-sizing: border-box;
  top: 46px;
  right: 0;
  left: 0;
  bottom: 50px;
  box-sizing: border-box;
  overflow-y: auto;
  // 轮播图区
  .Home_banner {
    width: 95%;
    margin: auto;
    /deep/.van-swipe {
      width: 100%;
      .van-swipe__track {
        // margin: auto;
        width: 100%;
        .van-swipe-item {
          // margin: auto;
          img {
            // margin: auto;
            width: 100%;
            // height: 285px;
            border-radius: 10px;
          }
        }
      }
    }
  }

  // 热卖区
  .hotpay {
    width: 95%;
    height: 50px;
    background: #fff;
    margin: auto;
    margin-top: 5px;
    display: flex;
    align-items: center;
    div {
      padding: 5px 15px;
      background: blue;
      border-top-right-radius: 15px;
      color: #fff;
    }
  }

  // 热卖推荐商品位置
  .hotPro {
    background: #f0f0f0;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      // margin-right: 10px;
      flex: 0 0 49%;
      // background: burlywood;
      margin-bottom: 10px;
    }
  }
}
</style>